<template>
    <div>
        <div class="top">
            <h3>用户列表</h3>
            <el-button type="primary" @click="adduserFn">添加</el-button>
        </div>
        <el-table :data="userMangeList" style="width: 100%;height: 600px;">
            <el-table-column label="序号" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <span style="margin-left: 10px">{{
                            (currentPage - 1) * pageSize + scope.$index + 1
                        }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="用户名" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <span>{{ scope.row.username }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="手机" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <span>{{ scope.row.mobile }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="邮箱" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <span>{{ scope.row.email }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="性别" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <el-tag class="ml-2" :type="scope.row.gender == '1' ? 'danger' : 'success'">{{
                            scope.row.gender == '1' ? '男' : scope.row.gender == '2' ? '女' : '保密'
                        }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: center">
                        <el-tag class="ml-2" :type="scope.row.status == '1' ? 'success' : 'danger'">{{
                            scope.row.status == "1" ? '正常' : '禁用'
                        }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="fn(scope)">编辑</el-button>
                    <el-button size="small" type="primary" @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="tatalnum"
            v-model:current-page="currentPage" />
    </div>

    <!-- 抽屉组件 -->
    <el-drawer v-model="isshowdrawer" direction="rtl">
        <template #header>
            <h4>添加用户</h4>
        </template>
        <template #default>
            <div>
                <el-form ref="ruleFormRef" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
                    <el-form-item prop="username" style="display: flex">
                        <span>用户名:</span>
                        <el-input v-model="username" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <span>密码:</span>
                        <el-input v-model="password" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="email">
                        <span>邮箱:</span>
                        <el-input v-model="email" type="text" autocomplete="off" />
                    </el-form-item>

                    <el-form-item prop="gender">
                        <el-radio-group v-model="gender">
                            <el-radio label="男" value="1" />
                            <el-radio label="女" value="2" />
                            <el-radio label="保密" value="3" />
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item prop="mobile" aria-placeholder="手机">
                        <span>手机号:</span>
                        <el-input v-model="mobile" type="text" autocomplete="off" />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="add_sure_Fn">确认添加</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { getApiusers, getApiUsersAdd } from '@/api/user.js'
import { ref, watch, reactive } from 'vue'
const userMangeList = ref([])
const isshowdrawer = ref(false)//抽屉组件开关
const tatalnum = ref(0)//数据总条数
const currentPage = ref(0)//当前页面
const pageSize = ref(0)

//添加用户所需数据
const username = ref('')
const password = ref('')
const email = ref('')
const gender = ref(0)
const mobile = ref()

//表单校验规则
// const rules = reactive({
//     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
//     password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
//     email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
//     gender: [{ required: true, message: '请输入选择性别', trigger: 'blur' }],
//     mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
// })

//添加用户按钮
const adduserFn = () => {
    isshowdrawer.value = true
}
//清空抽屉内容
const clear = () => {
    isshowdrawer.value = false
    username.value = ''
    password.value = ''
    email.value = ''
    gender.value = ''
    mobile.value = ''
}
//添加用户方法
const add_sure_Fn = () => {
    getApiUsersAdd({
        username: username.value,
        password: password.value,
        email: email.value,
        gender: gender.value == '男' ? 1 : gender.value == '女' ? 2 : 3,
        mobile: Number(mobile.value)
    }).then(res => {
        if (res.data.errNo == 0) {
            getApiusersFn()
            ElMessage({
                message: '添加用户成功',
                type: 'success',
                duration: 2000
            })
            console.log('getApiUsersAdd', res);
            clear()
        }
        else {
            ElMessage({
                message: '添加用户失败，请重新输入',
                type: 'warning',
                duration: 2000
            })
            clear()
        }
        console.log('getApiUsersAdd', res);

    })
}

//取消添加操作
const cancelClick = () => {
    clear()
}

//获取用户列表
const getApiusersFn = () => {
    getApiusers({ page: currentPage.value }).then(res => {
        userMangeList.value = res.data.paginate.data
        tatalnum.value = res.data.paginate.total
        currentPage.value = res.data.paginate.current_page
        pageSize.value = res.data.paginate.per_page
    })
}
getApiusersFn()//初始化页面

//监听页数变化，重新渲染页面
watch(currentPage, (newvalue, oldvalue) => {
    getApiusersFn()
})
</script>

<style scoped lang="scss">
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

::v-deep .el-form-item__content {
    margin-left: 0px !important;
}
</style>